<template>
  <div class="search-layout" @click.stop="">
    <div class="search">
      <input type="search"
             @input="search"
             v-model="name"
             @compositionstart="flag = false"
             @compositionend="flag = true"
             ref="searchInput"
      >
      <span class="font-large24" @click="onCancel">取消</span>
    </div>


  </div>
</template>

<script>
export default {
name: "DialogSearchView",
  data() {
    return {
      name: '',
      // type: '',
      searchList: [],
    }
  },
  // props: {
  //   data: Array,
  //   type: String,
  // },
  mounted() {
    this.$refs.searchInput.focus()
    // this.type = this.$route.params.type
  },
  methods: {
    onCancel() {
      // console.log(this.type)
      // switch (this.type) {
      //   case 'new':
      //       this.$router.push({name: 'index', params: {index: 0}});
      //       break;
      // }
      this.$parent.isSearch = false;
    },
    search() {
      console.log(this.name)
      this.$emit('callback', this.name)
    },
    // toInfoView(d) {
    //   this.$router.push({name: 'fileContent', params: {info: d, type: 'file'}})
    // },
    // goProjectInfo() {},
  }
}
</script>

<style scoped>
  .search-layout {
    /*background: #F5F8FB;*/
    /*background: #3bc5ff;*/
    background-image: url("../../assets/image/top.png");
    background-size: 100%;
    background-repeat: no-repeat;
    /*height: 40PX;*/
    display: flex;
    align-items: center;
    padding: 40PX 0 20PX;
    justify-content: space-between;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
  }
  .search {
      width: 100%;
      display: flex;
      align-content: center;
      /*padding: 30PX 20PX 11PX;*/
      box-sizing: border-box;
      /*background: #48cee8;*/
      padding: 0 10PX;
  }
  .search input {
      flex: 1;
      background: #fff;
      border: 1px solid #b2b2b2;
      margin-right: 20px;
      border-radius: 10px;
      padding: 0 10px;
      height: 40px;
  }
  .search span {
    color: #fff;
  }
  .list {
    padding: 20px 16px;
    background: #F5F8FB;
  }

  .list .item {
    background: #fff;
    border-radius: 30px;
    box-shadow: 1px 6px 9px 0px rgba(0, 121, 255, 0.05);
    margin-bottom: 6px;
    padding: 30px 20px;
    text-align: left;
  }

  .item .item-title {
    font-size: 26px;
    color: #191919;
  }

  .item .item-content {
    font-size: 24px;
    color: #959595;
    margin: 30px 0;
  }

  .item .desc {
    font-size: 18px;
    color: #C8C8C8;
  }
</style>